import React, { useState, useEffect } from 'react';
import { Button, Space, Table, Modal, Drawer, Form, Input, Select, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import * as salary from '../../../api/salary'
import { Outlet, useNavigate } from 'react-router-dom'
function Payroll(props: any) {
    interface DataType {
        key: string;
        name: string
        rolename: string;
        people: string;
        remake: string;
        state: string;
        id: string;
    }

    const Navigate = useNavigate()
    // 创建列表渲染数据
    const [tableData, setTableData] = useState<DataType[]>([])
    // 设置抽屉开关
    const [open, setOpen] = useState(false);
    // 设置添加编辑开关
    const [flag, setFlag] = useState(true)
    // 开启抽屉
    let onOpen = () => {
        console.log(flag);
        setOpen(true)
    }
    let onClose = () => {
        setOpen(false)
        setFlag(true)
        form.setFieldsValue({ formwork: '', month: '', affirm: '', num: '', provide: '', providetime: '' })
    }
    // 表格列表
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            key: 'num',
            render: (_, record) => <span>{tableData.indexOf(record) + 1}</span>
        },
        {
            title: '模板',
            dataIndex: 'formwork',
            key: 'formwork',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '薪资月份',
            dataIndex: 'pmonth',
            key: 'pmonth',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '人数',
            dataIndex: 'num',
            key: 'num',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '已发放',
            dataIndex: 'provide',
            key: 'provide',
            render: (text) => <span>{text == 0 ? '未发放' : '已发放'}</span>,
        },
        {
            title: '是否确认',
            dataIndex: 'affirm',
            key: 'affirm',
            render: (text) => <span> {text == 0 ? '未确认' : '已确认'}</ span>,
        },
        {
            title: '发放时间',
            dataIndex: 'providetime',
            key: 'providetime',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '操作',
            key: 'id',
            render: (_, record: any) => (
                <Space size="middle" >
                    <Button onClick={() => { onEdit(record) }}>编辑</Button>
                    <Button onClick={() => { onTiao1() }}>详情</Button>
                    <Button type="primary" onClick={() => { onTiao() }}>工资单详情</Button>
                    <Button danger onClick={() => { onDelete(record) }}>删除</Button>
                </Space>

            ),
        },
    ]
    // 用户列表
    let userlist = async () => {
        var res = await salary.payroll_list()
        console.log(res)
        setTableData(res.data.data)
    }
    useEffect(() => {
        userlist();
    }, [])
    // 表单验证成功
    let onFinish = async (values: any) => {
        if (flag) {
            console.log(flag);
            console.log(values);
            var res = await salary.payroll_add(values)
            userlist()
            message.success('新增成功', 2, onClose)
        } else {
            console.log(flag)
            let newobj = { id, ...values }
            var res = await salary.payroll_edit(newobj)
            userlist()
            message.success('修改成功', 2, onClose)
        }
    }
    // 表单验证失败
    let onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo)
        message.error('新增失败', 2, onClose)
    }
    // 保存id
    const [id, setId] = useState()
    // 编辑用户
    var [form] = Form.useForm()
    let onEdit = (item: any) => {
        console.log(item)
        setOpen(true)
        setFlag(false)
        setId(item.id)
        form.setFieldsValue(item)
        userlist()
    }
    // 删除工资单
    // 删除框
    let onDelete = async (id: any) => {
        var res = await salary.payroll_delete(id)
        console.log(res)
        userlist()
        message.success('删除成功', 2)
    };
    // 跳转工资详情
    let onTiao = () => {
        Navigate('/index/details')
    }
    // 跳转发放工资
    let onTiao2 = () => {
        Navigate('/index/payoff')
    }
    // 跳转详情
    let onTiao1 = () => {
        Navigate('/index/informaction')
    }
    return (
        <div className='paryoll'>
            <div style={{ width: '100%', padding: ' 0 0 0 20px', boxSizing: 'border-box', borderBottom: '1px solid #ddd' }}>
                <h3>工资发放</h3>
            </div>
            <Space style={{ margin: 20 }}>
                <Button type="primary" onClick={onOpen}>增加</Button>
                <Button type="primary" onClick={onTiao2}>前往发放</Button>
            </Space>
            <Table columns={columns} dataSource={tableData} rowKey={"id"} />
            <Drawer title="设置" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="模板"
                        name="formwork"
                        rules={[{ required: true, message: '请输入姓名' }]}
                    >
                        <Input disabled={!flag} />
                    </Form.Item>
                    <Form.Item
                        label="月份"
                        name="pmonth"
                        rules={[{ required: true, message: '请输入时间' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="人数"
                        name="num"
                        rules={[{ required: true, message: '请输入人数' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="已发放"
                        name="provide"
                        rules={[{ required: true, message: '请选择' }]}
                    >
                        <Select
                            style={{ width: 220 }}
                            options={[
                                { value: '0', label: '未发放' },
                                { value: '1', label: '已发放' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="是否确认"
                        name="affirm"
                        rules={[{ required: true, message: '请选择' }]}
                    >
                        <Select
                            style={{ width: 220 }}
                            options={[
                                { value: '0', label: '未确认' },
                                { value: '1', label: '已确认' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="发放时间"
                        name="providetime"
                        rules={[{ required: true, message: '请输入时间' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            <Outlet />
        </div>
    );
}

export default Payroll;